<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Javascript的DOM</h1>
<hr>
<ul type="square">
    <li>Java</li>
    <li>HTML</li>
    <li>Css</li>
    <li>Javascript</li>
</ul>
<script>
    let rootNode = window.document;
    //获得文档节点
    console.log(rootNode.nodeType + "," + rootNode.nodeName + "," + rootNode.nodeValue);
    //获得元素节点
    let elementNode = document.getElementsByTagName("ul")[0];
    console.log(elementNode.nodeType + "," + elementNode.nodeName + "," + elementNode.nodeValue);
    //获取属性节点
    let attrNode = elementNode.getAttributeNode("type");
    console.log(attrNode.nodeType + "," + attrNode.nodeName + "," + attrNode.nodeValue);
    //获取文本节点
    let textNode = document.getElementsByTagName("h1")[0].firstChild;
    console.log(textNode.nodeType + "," + textNode.nodeName + "," + textNode.nodeValue);
    //获取子元素集合
    let childNodes = document.getElementsByTagName("ul")[0].childNodes;
    childNodes.forEach(function (n) {
        //注意：li前面的回车也当做ul的子节点。
        console.log(n.innerText);
    })
</script>
</body>
</html>